<template>
	<view>
		<form @submit="addtask">
		<view class="contanier">
			<view class="element">
				<view class="title">
					<view>分类</view>
					<text>*</text>
				</view>
				<view class="content">
					<picker :value="index" @change="bindChange" :range="cate" range-key="title">
						<view class="info">{{cate[index].title}} ›</view>
					</picker>
				</view>
			</view> 
			<view class="element">
				<view class="title">
					<view>单个金额</view>
					<text>*</text>
				</view>
				<view class="content">
					<input type="digit" @blur="price" name="unit_price" :placeholder="'最低'+cate[index].money_limit+'元起'" placeholder-style="color:#9e9e9e" />
				</view>
			</view>

			<view class="element">
				<view class="title">
					<view>数量</view>
					<text>*</text>
				</view>
				<view class="content">
					<input type="number" @blur="number" name="quantity"  placeholder="最低3个起" placeholder-style="color:#9e9e9e" />
				</view>
			</view>

			<view class="element">
				<view class="title">
					<view>任务标题</view>
					<text>*</text>
				</view>
				<view class="content">
					<input type="text" name="title" maxlength="12" placeholder="输入任务标题(限12字)" placeholder-style="color:#9e9e9e" />
				</view>
			</view>
			<view class="element">
				<view class="title">
					<view>接单限时</view>
				</view>
				<view class="content">
					<input type="number" name="tasktimer" maxlength="50" placeholder="输入小时数(例如:1)" placeholder-style="color:#9e9e9e" />
				</view>
			</view>
			<view class="element">
				<view class="title">
					<view>App名称</view>
				</view>
				<view class="content">
					<input type="text" name="app_name" maxlength="20"  placeholder="若是下载任务必填" placeholder-style="color:#9e9e9e" />
				</view>
			</view>
		</view>

		<view class="contanier" style="padding-bottom: 30rpx;">
			<view class="senior">
				<view class="title">
					<view class="left">
						<view>任务介绍</view>
						<text>*</text>
					</view>
					<!-- <view class="right">添加验证实例图</view> -->
				</view>
				<view class="describe-box" @click="uploadimgIndex=1">
					<textarea maxlength="4096" class="textarea-info" name="introduction" placeholder-style="color:#9e9e9e" placeholder="请填写任务应该如何完成"></textarea>
					<uploadimgs :imgwidth="132" :imghight="132"  :imgnum="imgnum" :imglist="introduction_thumb" ref="uploadimgs"></uploadimgs>
				</view>
			</view>
			
			<view class="senior">
				<view class="title">
					<view class="left">
						<view>任务链接</view>
					</view>
					<!-- <view class="right">添加验证实例图</view> -->
				</view>
				<view class="describe-box">
					<textarea maxlength="4096" class="textarea-info" name="link" placeholder-style="color:#9e9e9e" placeholder="请填写链接或口令,可不填"></textarea>
				</view>
			</view>
			
			<view class="senior">
				<view class="title">
					<view class="left">
						<view>验证任务</view>
						<text>*</text>
					</view> 
					<!-- <view class="right">添加验证实例图</view> -->
				</view>
				<view class="describe-box" @click="uploadimgIndex=2">
					<textarea maxlength="4096" class="textarea-info" name="verification" placeholder-style="color:#9e9e9e" placeholder="请填写任务应该如何完成"></textarea>
					<uploadimgs :imgwidth="132" :imghight="132" :imgnum="imgnum" :imglist="verification_thumb" ref="uploadimgs"></uploadimgs>
				</view>
			</view>
			<!--需要验证的字段-->
			<input class="yzfont" maxlength="50" name="verification_key" placeholder-style="color:#9e9e9e"  placeholder="请输入验证文字(选填,例抖音号)"/>
		<!-- 	<view class="preview" @click="navgoto('/pages/task/detail')">预览任务</view> -->
			</view>
		<view class="empty-box"></view>
		<view class="launch-button">
			<view class="add-box">
				<view class="estimate">
					<text>预计消费</text>
					<view class="money"><text>￥</text>{{totalmoney.toFixed(2)}}</view>
				</view>
				<button form-type="submit" class="buttons">塞红包</button>
			</view>
			
		</view>
		</form>
	</view>
</template>

<script>
	/**
	 * 发起任务
	 */
	export default {
		data() {
			return {
				lowprice:1.5,//配置最低起步金额
				totalmoney:0,
				numbers:0,
				prices:0,
				uploadimgIndex:1,
				cate: [{title:'全部'}],
				index: 0,
				imgnum: 10, //最大上传的图片数量
				introduction_thumb:[],//介绍图片
				verification_thumb:[],//验证图片
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/article/index?key=5fc99afc9d391'
			})
		},
		onLoad() {
			
			//获取上图的图片数组
			uni.$on('getimageArr',(data)=>{
				if(this.uploadimgIndex===1){
					this.introduction_thumb = data
				}else if(this.uploadimgIndex===2){
					this.verification_thumb = data
				}
			})
			this.init()
		},
		methods: {
			number(e){
				this.numbers = e.detail.value
				if( e.detail.value<3){
					this.$ShowMsg('数量最低3个起')
					return
				}
				this.calculation()
			},
			price(e){
				this.prices = e.detail.value
				this.calculation()
			},
			//计算
			calculation(){
				// 下载注册最低 1.5 
				// 转发分享最低 0.5
				// 游戏试玩最低 1.5
				// 其他类目最低 0.1
				if(this.prices && this.numbers){
					this.totalmoney = this.prices * this.numbers
					if(this.totalmoney<this.cate[this.index].money_limit*3){
						this.$ShowMsg(this.cate[this.index].title+'任务金额配置不正确',null,false)
					}
				}
			},
			addtask(e){
				//需要绑定手机号
				let userinfo = uni.getStorageSync('user_info')
				if(!userinfo.phone){
					this.$ShowMsg('请前往【设置中心】绑定手机号')
					return
				}
				let form = e.detail.value
				//介绍图片
				form.sample_graph = this.introduction_thumb
				//验证图片
				form.verification_diagram = this.verification_thumb
				//类别
				form.category_id = this.cate[this.index].id
				
				//判断金额是合理
				if(form.digit* form.number<0.1){
					this.$ShowMsg('任务金额不合理')
					return
				}
				if(!form.title){
					this.$ShowMsg('任务标题不能为空')
					return 
				}
				if(form.tasktimer>168 || form.tasktimer<1){
					this.$ShowMsg('设置时间必须大于1小于168')
					return
				}
				if(!form.introduction || !form.verification){
					this.$ShowMsg('请输入介绍或验证说明')
					return
				}
				if(form.sample_graph.length==0 || form.verification_diagram==0){
					this.$ShowMsg('示例图须上传')
					return
				}
				// console.log(form)
				// return
				let tipstr = '你发布的单价为：'+ parseFloat(this.prices).toFixed(2)+'，扣除平台服务费后接单用户实际拿到'+parseFloat(this.prices *0.8).toFixed(2)+'元单价，单价越搞，任务完成的越快哦，是否发布？'
				let _this=this
				uni.showModal({ 
					title: "提示",
					content: tipstr,
					success: (ret) => { 
						if (ret.confirm) {
							_this.backtocommit(form)
						}
					}
				})
			},
			backtocommit(data){
				//提交任务信息
				this.$HttRequest({
					url: '/moonlight/add',
					param: data
				},'POST',true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$ShowMsg('已成功提交任务，请耐心等待审核',)
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/task/detail?id='+res.data
							})
						},2500)
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg(error.errMsg);
				})
			},
			bindChange(e) {
				this.index = e.detail.value
				//配置起步金额
				
			 // let cateid =this.cate[e.detail.value].id
			 // switch (cateid){
				//  case 2:
				// 	this.lowprice = 1.5
				//  break;
				//  case 3:
				// 	this.lowprice = 0.5
				//  break;
				//  case 4:
				// 	this.lowprice = 1.5
				//  break;
				//  case 5:
				// 	this.lowprice = 0.1
				//  break;
			 // }
			},
			navgoto(url){
				uni.navigateTo({
					url:url
				})
			},
			init(){
				//获取任务分类
				this.$HttRequest({
					url: '/moonlight_category/lists',
					param: ''
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						let catearr = res.data
						catearr.splice(0,1)
						this.cate = catearr
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg(error.errMsg);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	.empty-box{
		height: 200rpx;
	}
	.launch-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		border-top: 1rpx solid #f0f0f0;
		height: 145rpx;
		z-index: 999;
		background-color: #fff;
		.add-box{
		
			width: 90%;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.buttons {
				border-radius: 20rpx;
				width: 320rpx;
				height: 75rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 30rpx;
				font-weight: bold;
				margin-right:0 ;
				background-color: $uni-color-primary;
			}
			
			.estimate {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #696969;
				font-size: 28rpx;
			
				.money {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #F43F3B;
					font-size: 35rpx;
					font-weight: bold;
			
					text {
						font-size: 22rpx;
					}
				}
			}
		}
		

	}

	.contanier {
		width: 90%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 20rpx;
		.preview{
			font-size: 28rpx;
			padding:10rpx 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid $uni-color-primary;
			width: 140rpx;
			border-radius: 10rpx;
			color: $uni-color-primary;	
			margin: 0 auto;
			margin-right: 40rpx;
			margin-top: 30rpx;
		}
		.yzfont{
			padding: 20rpx;
			border: 1rpx solid #f8f8f8;
			width: 82%;
			border-radius: 20rpx;
			font-size: 28rpx;
			margin: 20rpx auto;
		}
		
		.senior {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			
			.title {
				color: #000;
				font-size: 28rpx;
				margin-bottom: 20rpx;
				width: 88%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx auto;
				margin-top: 30rpx;
				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 30rpx;

					text {
						margin-left: 10rpx;
						color: #F43F3B;
					}
				}

				.right {
					font-size: 22rpx;
					color: #70B5F9;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.describe-box {
				display: flex;
				justify-content: center;
				align-items:  flex-start;
				width: 88%;
				flex-direction: column;
				margin: 0 auto;
				.textarea-info {
					padding: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx solid #f0f0f0;
					border-radius: 10rpx;
					width: 92%;
					height: 140rpx;
					font-size: 28rpx;
				}
			}
		}

		.element {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #6b6b6b;
			font-size: 28rpx;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;

				text {
					margin-left: 20rpx;
					font-size: 22rpx;
					color: #F43F3B;
				}
			}

			.content {
				display: flex;
				align-items: center;
				justify-content: center;

				input {
					text-align: right;
					font-size: 28rpx;
				}

				.info {
					font-size: 30rpx;
				}

				.jiantou {
					font-size: 40rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
